<template>
  <div>

    <SkyCardPanel title="树形表格">
      <div slot="header-right">
        <sky-button type="primary" size="small" @click="addCate">添加</sky-button>
        <sky-button type="default" size="small" @click="editCate">编辑</sky-button>
        <sky-button type="secondary" size="small" @click="delCate">删除</sky-button>
      </div>
      <div slot="main" class="containter-table">

        <!-- 树形表格 -->
        <sky-tree-table ref="sky-tree-table" defaultexpend showcheckbox v-slot="row" :outsideList="outsideList" @getCurrent="getCurrent">
          <sky-tree-column :row="row.scope" label="电脑名称" prop="name" width="350" deepchoice ladder showIcon></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" ladder></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑价格" prop="price"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"></sky-tree-column>
        </sky-tree-table>

        <div style="margin:20px;text-align: right;">
          <sky-button type="primary" @click="saveAll" style="margin-right:20px">获取所有数据</sky-button>
          <sky-button type="primary" @click="saveAllSelect">所有选中数据</sky-button>
        </div>

      </div>
    </SkyCardPanel>

    <!-- 添加弹框 -->
    <sky-dialog :DialogShow.sync="addDialogShow" :title="title" size="small">
      <div slot="body" class="sky-dialog-body">

        <sky-form :model="addmodel" :rules="addrules" ref="sky-form">
          <sky-form-item label="电脑名称" prop="ComputerName">
            <sky-input v-model.lazy="addmodel.ComputerName"></sky-input>
          </sky-form-item>
          <sky-form-item label="电脑编号" prop="SerialNumber">
            <sky-input v-model.lazy="addmodel.SerialNumber"></sky-input>
          </sky-form-item>
          <sky-form-item label="电脑价格" prop="Price">
            <sky-input v-model.lazy="addmodel.Price"></sky-input>
          </sky-form-item>
          <sky-form-item label="电脑厂家" prop="Factory">
            <sky-input v-model.lazy="addmodel.Factory"></sky-input>
          </sky-form-item>
        </sky-form>

      </div>
      <div slot="footer" class="sky-dialog-footer">
        <sky-button type="secondary" @click="addDialogShow=false">取消</sky-button>
        <sky-button type="primary" @click="submitForm('sky-form')">提交</sky-button>
      </div>
    </sky-dialog>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
              
        &lt;sky-button type="primary"  size="small" @click="addCate"&gt;添加&lt;/sky-button&gt;
        &lt;sky-button type="default"  size="small" @click="editCate"&gt;编辑&lt;/sky-button&gt;
        &lt;sky-button type="secondary"  size="small" @click="delCate"&gt;删除&lt;/sky-button&gt;


        &lt;!-- 树形表格 --&gt;
        &lt;sky-tree-table ref="sky-tree-table"  defaultexpend showcheckbox v-slot="row" :outsideList="outsideList" @getCurrent="getCurrent"&gt;
          &lt;sky-tree-column :row="row.scope" label="电脑名称" prop="name"  width="350" deepchoice ladder showIcon&gt;&lt;/sky-tree-column&gt;
          &lt;sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" ladder&gt;&lt;/sky-tree-column&gt;
          &lt;sky-tree-column :row="row.scope" label="电脑价格" prop="price" width="200"&gt;&lt;/sky-tree-column&gt;
          &lt;sky-tree-column :row="row.scope" label="电脑厂家" prop="factory" width="200"&gt;&lt;/sky-tree-column&gt;
        &lt;/sky-tree-table&gt;

        &lt;div style="margin:20px;text-align: right;"&gt;
          &lt;sky-button type="primary" @click="saveAll" style="margin-right:20px"&gt;获取所有数据&lt;/sky-button&gt;
          &lt;sky-button type="primary" @click="saveAllSelect"&gt;所有选中数据&lt;/sky-button&gt;
        &lt;/div&gt;


        &lt;!-- 添加弹框 --&gt;
        &lt;sky-dialog :DialogShow.sync="addDialogShow" :title="title" size="small"&gt;
          &lt;div slot="body" class="sky-dialog-body"&gt;

            &lt;sky-form :model="addmodel" :rules="addrules" ref="sky-form"&gt;
              &lt;sky-form-item label="电脑名称" prop="ComputerName"&gt;
                &lt;sky-input v-model="addmodel.ComputerName"&gt;&lt;/sky-input&gt;
              &lt;/sky-form-item&gt;
              &lt;sky-form-item label="电脑编号" prop="SerialNumber"&gt;
                &lt;sky-input v-model="addmodel.SerialNumber"&gt;&lt;/sky-input&gt;
              &lt;/sky-form-item&gt;
              &lt;sky-form-item label="电脑价格" prop="Price"&gt;
                &lt;sky-input v-model="addmodel.Price"&gt;&lt;/sky-input&gt;
              &lt;/sky-form-item&gt;
              &lt;sky-form-item label="电脑厂家" prop="Factory"&gt;
                &lt;sky-input v-model="addmodel.Factory"&gt;&lt;/sky-input&gt;
              &lt;/sky-form-item&gt;
            &lt;/sky-form&gt;

          &lt;/div&gt;
          &lt;div slot="footer" class="sky-dialog-footer"&gt;
            &lt;sky-button type="secondary" @click="addDialogShow=false"&gt;取消&lt;/sky-button&gt;
            &lt;sky-button type="primary" @click="submitForm('sky-form')"&gt;提交&lt;/sky-button&gt;
          &lt;/div&gt;
        &lt;/sky-dialog&gt;
              
          </code>
      </pre>

        <!-- 使用指令 -->
        <pre>
          <code class="javascript">

            export default {
              data () {
                return {
                  addDialogShow: false,//添加弹框
                  title: '',
                  outsideList: [//列表数据
                    {
                      id: 10,
                      parentId: 0,
                      name: '电脑',
                      price: '',
                      factory: '',
                      cateNo: '10',
                    },
                    {
                      id: 1010,
                      parentId: 10,
                      name: '笔记本电脑',
                      price: '',
                      factory: '',
                      cateNo: '1010',
                    },
                    {
                      id: 101010,
                      parentId: 1010,
                      name: '华为',
                      price: '5500$',
                      factory: '华为科技',
                      cateNo: '101010',
                    },
                    {
                      id: 101011,
                      parentId: 1010,
                      name: '苹果',
                      price: '8000$',
                      factory: '苹果科技',
                      cateNo: '101011',
                    },
                  ],
                  currentUnit: null,//缓存点击选中的节点
                  //弹框数据
                  addmodel: {
                    ComputerName: '',
                    SerialNumber: '',
                    Price: '',
                    Factory: '',
                  },
                  //验证规则
                  addrules: {
                    ComputerName: [
                      { required: true, message: '请输入电脑' },
                    ],
                    SerialNumber: [
                      { required: true, message: '请输入电脑编号' },
                    ],
                    Price: [
                      { required: true, message: '请输入电脑价格' },
                    ],
                    Factory: [
                      { required: true, message: '请输入电脑厂家' },
                    ],
                  }
                }
              },
              methods: {
                //点击获取当前行
                getCurrent (row, eventType) {
                  eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
                  this.currentUnit = row
                },
                //添加子节点
                addCate () {
                  if (this.currentUnit == null) {
                    this.$SkyMessage('没有选中节点', 'error')
                    return false
                  }
                  this.addDialogShow = true
                  this.title = '添加'
                },
                //编辑当前节点
                editCate () {
                  if (this.currentUnit == null) {
                    this.$SkyMessage('没有选中节点', 'error')
                    return false
                  }
                  this.addDialogShow = true
                  this.title = '编辑'
                  let { name, cateNo, price, factory } = this.currentUnit
                  this.addmodel = {
                    ComputerName: name,
                    SerialNumber: cateNo,
                    Price: price,
                    Factory: factory,
                  }

                },
                //删除当前节点
                delCate () {
                  this.$refs['sky-tree-table'].delete(this.currentUnit)
                  this.currentUnit = null
                },
                //新增
                addSubmit (form) {
                  // 表单全局校验
                  this.$refs[form].validate(valid => {
                    let option = {
                      id: Math.floor(Math.random() * 5 + 1),
                      parentId: this.currentUnit.id,
                      name: this.addmodel.ComputerName,
                      cateNo: this.addmodel.SerialNumber,
                      price: this.addmodel.Price,
                      factory: this.addmodel.Factory,
                    }
                    if (valid) {
                      this.$SkyMessage('添加成功', 'success')
                      this.$refs['sky-tree-table'].append(option)
                      this.addDialogShow = false
                    } else {
                      this.$SkyMessage('校验失败', 'error')
                    }
                  })
                },
                //编辑
                editForm (form) {
                  // 表单全局校验
                  this.$refs[form].validate(valid => {
                    if (valid) {
                      this.$SkyMessage('编辑成功', 'success')

                      this.currentUnit.name = this.addmodel.ComputerName
                      this.currentUnit.cateNo = this.addmodel.SerialNumber
                      this.currentUnit.price = this.addmodel.Price
                      this.currentUnit.factory = this.addmodel.Factory

                      this.addDialogShow = false
                    } else {
                      this.$SkyMessage('校验失败', 'error')
                    }
                  })
                },
                submitForm (form) {
                  this.title == '添加' ? this.addSubmit(form) : this.editForm(form)
                },
                //获取所有数据
                saveAll () {

                  console.log('获取所有数据', this.$refs['sky-tree-table'].getAllList())

                  let differentiateTree = this.$options.filters[
                    "differentiateTree"
                  ];
                  console.log('获取树结构数据', differentiateTree(this.$refs['sky-tree-table'].getAllList()))

                },
                //获取所有数据
                saveAllSelect () {

                  console.log('获取所有数据', this.$refs['sky-tree-table'].getAllSelectList())

                  let differentiateTree = this.$options.filters[
                    "differentiateTree"
                  ];
                  console.log('获取树结构数据', differentiateTree(this.$refs['sky-tree-table'].getAllSelectList()))

                },
              },
            }
                
            </code>
        </pre>

      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="固定表头&&拖拽表头">

      <div slot="main" class="containter-table">
        <!-- 树形表格 -->
        <sky-tree-table ref="SkyFixedHeaderTree" FixedHead DropWidth defaultexpend :defaultSelect="defaultSelect" maxheight="200" showcheckbox v-slot="row" :outsideList="fixedHeaderList">
          <sky-tree-column :row="row.scope" label="电脑名称" prop="name" width="350" ladder showIcon></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" ladder></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑价格" prop="price"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"></sky-tree-column>
        </sky-tree-table>

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
            &lt;!-- 树形表格 --&gt;
            &lt;sky-tree-table ref="SkyFixedHeaderTree" defaultexpend DropWidth :defaultSelect="defaultSelect" FixedHead maxheight="200" showcheckbox v-slot="row" :outsideList="fixedHeaderList"&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑名称" prop="name"  width="350" ladder showIcon&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" ladder&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑价格" prop="price"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"&gt;&lt;/sky-tree-column&gt;
            &lt;/sky-tree-table&gt;  
              
          </code>
      </pre>

        <pre>
          <code class="javascript">
              
            export default {
              data () {
                return {
                    fixedHeaderList: [//列表数据
                      {
                        id: 10,
                        parentId: 0,
                        name: '电脑',
                        price: '',
                        factory: '',
                        cateNo: '10',
                      },
                      {
                        id: 1010,
                        parentId: 10,
                        name: '笔记本电脑',
                        price: '',
                        factory: '',
                        cateNo: '1010',
                      },
                      {
                        id: 101010,
                        parentId: 1010,
                        name: '华为',
                        price: '5500$',
                        factory: '华为科技',
                        cateNo: '101010',
                      },
                      {
                        id: 101011,
                        parentId: 1010,
                        name: '苹果',
                        price: '8000$',
                        factory: '苹果科技',
                        cateNo: '101011',
                      },
                      {
                        id: 101013,
                        parentId: 1010,
                        name: '惠普',
                        price: '6000$',
                        factory: '惠普科技',
                        cateNo: '101013',
                      },
                      {
                        id: 101014,
                        parentId: 1010,
                        name: '戴尔',
                        price: '6000$',
                        factory: '戴尔科技',
                        cateNo: '101014',
                      },
                      {
                        id: 101016,
                        parentId: 1010,
                        name: 'ThinkPad',
                        price: '6000$',
                        factory: '联想科技',
                        cateNo: '101016',
                      },
                      {
                        id: 101017,
                        parentId: 1010,
                        name: '外星人',
                        price: '6000$',
                        factory: '外星人科技',
                        cateNo: '101017',
                      },
                      {
                        id: 101018,
                        parentId: 1010,
                        name: '雷神',
                        price: '6000$',
                        factory: '雷神科技',
                        cateNo: '101018',
                      },
                      {
                        id: 1011,
                        parentId: 10,
                        name: '平板电脑',
                        price: '',
                        factory: '',
                        cateNo: '1011',
                      },
                      {
                        id: 101110,
                        parentId: 1011,
                        name: '苹果Air3',
                        price: '2000$',
                        factory: '苹果科技',
                        cateNo: '101110',
                      },
                      {
                        id: 101111,
                        parentId: 1011,
                        name: '小米4 Plus',
                        price: '2000$',
                        factory: '小米科技',
                        cateNo: '101111',
                      },
                      {
                        id: 101112,
                        parentId: 1011,
                        name: '华为M5',
                        price: '2000$',
                        factory: '华为科技',
                        cateNo: '101112',
                      },
                    ],
                    defaultSelect:[]
                }
              },
                mounted () {
                  setTimeout(() => {
                    this.defaultSelect = [1010, 101010]
                  }, 1000)
                }
            }
          </code>
      </pre>

      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="自定义构建key">

      <div slot="main" class="containter-table">

        <!-- 树形表格 -->
        <sky-tree-table ref="SkySelfBuildTree" :normalizer="normalizer" defaultexpend v-slot="row" :outsideList="selfBuildList">
          <sky-tree-column :row="row.scope" label="电脑名称" prop="name" width="350" ladder showIcon></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" ladder></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑价格" prop="price"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"></sky-tree-column>
        </sky-tree-table>

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
            &lt;sky-tree-table ref="SkySelfBuildTree" :normalizer="normalizer" defaultexpend v-slot="row" :outsideList="selfBuildList"&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑名称" prop="name" width="350" ladder showIcon&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" ladder&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑价格" prop="price"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"&gt;&lt;/sky-tree-column&gt;
            &lt;/sky-tree-table&gt;

          </code>
      </pre>

        <pre>
          <code class="javascript">
              
            export default {
              data () {
                return {
                  normalizer: {
                    parentId: 'treeParentId',
                    id: 'treeId',
                  },
                  selfBuildList: [//列表数据
                    {
                      treeId: 10,
                      treeParentId: 0,
                      name: '电脑',
                      price: '',
                      factory: '',
                      cateNo: '10',
                    },
                    {
                      treeId: 1010,
                      treeParentId: 10,
                      name: '笔记本电脑',
                      price: '',
                      factory: '',
                      cateNo: '1010',
                    },
                    {
                      treeId: 101010,
                      treeParentId: 1010,
                      name: '华为',
                      price: '5500$',
                      factory: '华为科技',
                      cateNo: '101010',
                    },
                    {
                      treeId: 101011,
                      treeParentId: 1010,
                      name: '苹果',
                      price: '8000$',
                      factory: '苹果科技',
                      cateNo: '101011',
                    },
                  ], 
                }
              }
            }
          </code>
      </pre>

      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="当前行特殊标记">

      <div slot="main" class="containter-table">

        <!-- 树形表格 -->
        <sky-tree-table ref="SkyTagTree" defaultexpend v-slot="row" :outsideList="hasErrorList">
          <sky-tree-column :row="row.scope" label="电脑名称" prop="name" width="350" ladder showIcon></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" ladder></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑价格" prop="price"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"></sky-tree-column>
        </sky-tree-table>

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
            &lt;sky-tree-table ref="SkyTagTree"  defaultexpend v-slot="row" :outsideList="hasErrorList"&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑名称" prop="name" width="350" ladder showIcon&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" ladder&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑价格" prop="price"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"&gt;&lt;/sky-tree-column&gt;
            &lt;/sky-tree-table&gt;

          </code>
      </pre>

        <pre>
          <code class="javascript">
              
            export default {
              data () {
                return {
                  hasErrorList:[//列表数据
                  {
                    id: 10,
                    parentId: 0,
                    name: '电脑',
                    price: '',
                    factory: '',
                    cateNo: '10',
                  },
                  {
                    id: 1010,
                    parentId: 10,
                    name: '笔记本电脑',
                    price: '',
                    factory: '',
                    cateNo: '1010',
                  },
                  {
                    id: 101010,
                    parentId: 1010,
                    name: '华为',
                    price: '5500$',
                    factory: '华为科技',
                    cateNo: '101010',
                    linetag: 'warning',
                  },
                  {
                    id: 101011,
                    parentId: 1010,
                    name: '苹果',
                    price: '8000$',
                    factory: '苹果科技',
                    cateNo: '101011',
                  },
                ], 
                }
              }
            }
          </code>
      </pre>

      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="固定多列&&末级勾选">

      <div slot="main" class="containter-table">

        <!-- 树形表格 -->
        <sky-tree-table ref="SkyFixedColumnTree" FixedColumn EndCheck defaultexpend showcheckbox TableWidth="2000" v-slot="row" :outsideList="fixedColumnList">
          <sky-tree-column :row="row.scope" label="电脑名称" prop="name" width="350" fixed fixedLeftWidth="60" ladder showIcon></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" fixed fixedLeftWidth="410" ladder></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑价格" prop="price" required></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能1" prop="nature1"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能2" prop="nature2"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能3" prop="nature3"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能4" prop="nature4"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能5" prop="nature5"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能6" prop="nature6"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能7" prop="nature7"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能8" prop="nature8"></sky-tree-column>
        </sky-tree-table>

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
            &lt;!-- 树形表格 --&gt;
            &lt;sky-tree-table ref="SkyFixedColumnTree" FixedColumn EndCheck defaultexpend  showcheckbox TableWidth="2000" v-slot="row" :outsideList="fixedColumnList"&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑名称" prop="name" width="350" fixed fixedLeftWidth="60" ladder showIcon&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" fixed fixedLeftWidth="410" ladder&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑价格" prop="price" required&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="性能1" prop="nature1"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="性能2" prop="nature2"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="性能3" prop="nature3"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="性能4" prop="nature4"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="性能5" prop="nature5"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="性能6" prop="nature6"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="性能7" prop="nature7"&gt;&lt;/sky-tree-column&gt;
              &lt;sky-tree-column :row="row.scope" label="性能8" prop="nature8"&gt;&lt;/sky-tree-column&gt;
            &lt;/sky-tree-table&gt;

              
          </code>
      </pre>

        <pre>
          <code class="javascript">
              
            export default {
              data () {
                return {
                    fixedColumnList: [
                      {
                        id: 10,
                        parentId: 0,
                        name: '电脑',
                        price: '',
                        factory: '',
                        cateNo: '10',
                        nature1: 'xxxxx',
                        nature2: 'xxxxx',
                        nature3: 'xxxxx',
                        nature4: 'xxxxx',
                        nature5: 'xxxxx',
                        nature6: 'xxxxx',
                        nature7: 'xxxxx',
                        nature8: 'xxxxx',
                      },
                      {
                        id: 1010,
                        parentId: 10,
                        name: '笔记本电脑',
                        price: '',
                        factory: '',
                        cateNo: '1010',
                        nature1: 'xxxxx',
                        nature2: 'xxxxx',
                        nature3: 'xxxxx',
                        nature4: 'xxxxx',
                        nature5: 'xxxxx',
                        nature6: 'xxxxx',
                        nature7: 'xxxxx',
                        nature8: 'xxxxx',
                      },
                      {
                        id: 101010,
                        parentId: 1010,
                        name: '华为',
                        price: '5500$',
                        factory: '华为科技',
                        cateNo: '101010',
                        nature1: 'xxxxx',
                        nature2: 'xxxxx',
                        nature3: 'xxxxx',
                        nature4: 'xxxxx',
                        nature5: 'xxxxx',
                        nature6: 'xxxxx',
                        nature7: 'xxxxx',
                        nature8: 'xxxxx',
                      },
                      {
                        id: 101011,
                        parentId: 1010,
                        name: '苹果',
                        price: '8000$',
                        factory: '苹果科技',
                        cateNo: '101011',
                        nature1: 'xxxxx',
                        nature2: 'xxxxx',
                        nature3: 'xxxxx',
                        nature4: 'xxxxx',
                        nature5: 'xxxxx',
                        nature6: 'xxxxx',
                        nature7: 'xxxxx',
                        nature8: 'xxxxx',
                      },
                    ],
                }
              }
            }
          </code>
      </pre>

      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="合并表头">

      <div slot="main" class="containter-table">

        <!-- 树形表格 -->
        <sky-tree-table ref="SkyFixedColumnTree" defaultexpend :SelfTheadConfig="SelfTheadConfig" FixedColumn TableWidth="2000" v-slot="row" :outsideList="fixedColumnList">
          <sky-tree-column :row="row.scope" label="电脑名称" prop="name" width="350" fixed fixedLeftWidth="0" deepchoice ladder showIcon></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" fixed fixedLeftWidth="350" ladder></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑价格" prop="price"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能1" prop="nature1"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能2" prop="nature2"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能3" prop="nature3"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能4" prop="nature4"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能5" prop="nature5"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能6" prop="nature6"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能7" prop="nature7"></sky-tree-column>
          <sky-tree-column :row="row.scope" label="性能8" prop="nature8"></sky-tree-column>
        </sky-tree-table>

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
              &lt;!-- 树形表格 --&gt;
              &lt;sky-tree-table ref="SkyFixedColumnTree" defaultexpend :SelfTheadConfig="SelfTheadConfig" FixedColumn TableWidth="2000" v-slot="row" :outsideList="fixedColumnList"&gt;
                &lt;sky-tree-column :row="row.scope" label="电脑名称" prop="name" width="350" fixed fixedLeftWidth="0" deepchoice ladder showIcon&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="电脑品牌" prop="cateNo" width="200" fixed fixedLeftWidth="350" ladder&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="电脑价格" prop="price"&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="电脑厂家" prop="factory"&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="性能1" prop="nature1"&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="性能2" prop="nature2"&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="性能3" prop="nature3"&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="性能4" prop="nature4"&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="性能5" prop="nature5"&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="性能6" prop="nature6"&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="性能7" prop="nature7"&gt;&lt;/sky-tree-column&gt;
                &lt;sky-tree-column :row="row.scope" label="性能8" prop="nature8"&gt;&lt;/sky-tree-column&gt;
              &lt;/sky-tree-table&gt;
              
          </code>
      </pre>

        <pre>
          <code class="javascript">
              
            export default {
              data () {
                return {
                    fixedColumnList: [
                      {
                        id: 10,
                        parentId: 0,
                        name: '电脑',
                        price: '',
                        factory: '',
                        cateNo: '10',
                        nature1: 'xxxxx',
                        nature2: 'xxxxx',
                        nature3: 'xxxxx',
                        nature4: 'xxxxx',
                        nature5: 'xxxxx',
                        nature6: 'xxxxx',
                        nature7: 'xxxxx',
                        nature8: 'xxxxx',
                      },
                      {
                        id: 1010,
                        parentId: 10,
                        name: '笔记本电脑',
                        price: '',
                        factory: '',
                        cateNo: '1010',
                        nature1: 'xxxxx',
                        nature2: 'xxxxx',
                        nature3: 'xxxxx',
                        nature4: 'xxxxx',
                        nature5: 'xxxxx',
                        nature6: 'xxxxx',
                        nature7: 'xxxxx',
                        nature8: 'xxxxx',
                      },
                      {
                        id: 101010,
                        parentId: 1010,
                        name: '华为',
                        price: '5500$',
                        factory: '华为科技',
                        cateNo: '101010',
                        nature1: 'xxxxx',
                        nature2: 'xxxxx',
                        nature3: 'xxxxx',
                        nature4: 'xxxxx',
                        nature5: 'xxxxx',
                        nature6: 'xxxxx',
                        nature7: 'xxxxx',
                        nature8: 'xxxxx',
                      },
                      {
                        id: 101011,
                        parentId: 1010,
                        name: '苹果',
                        price: '8000$',
                        factory: '苹果科技',
                        cateNo: '101011',
                        nature1: 'xxxxx',
                        nature2: 'xxxxx',
                        nature3: 'xxxxx',
                        nature4: 'xxxxx',
                        nature5: 'xxxxx',
                        nature6: 'xxxxx',
                        nature7: 'xxxxx',
                        nature8: 'xxxxx',
                      },
                    ],
                    SelfTheadConfig: [
                      [
                        {
                          title: '电脑名称',
                          colspan: 1,
                          rowspan: 2,
                          fixed: true,
                          width: 350,
                          fixedLeftWidth: 0,
                          deepchoice: true
                        },
                        {
                          title: '电脑品牌',
                          colspan: 1,
                          rowspan: 2,
                          fixed: true,
                          width: 200,
                          fixedLeftWidth: 350
                        },
                        {
                          title: '详情',
                          colspan: 10,
                          rowspan: 1,
                        },
                      ],
                      [
                        {
                          title: '电脑价格',
                          colspan: 1,
                          rowspan: 1,
                        },
                        {
                          title: '电脑厂家',
                          colspan: 1,
                          rowspan: 1,
                        },
                        {
                          title: '性能1',
                          colspan: 1,
                          rowspan: 1,
                        },
                        {
                          title: '性能2',
                          colspan: 1,
                          rowspan: 1,
                        },
                        {
                          title: '性能3',
                          colspan: 1,
                          rowspan: 1,
                        },
                        {
                          title: '性能4',
                          colspan: 1,
                          rowspan: 1,
                        },
                        {
                          title: '性能5',
                          colspan: 1,
                          rowspan: 1,
                        },
                        {
                          title: '性能6',
                          colspan: 1,
                          rowspan: 1,
                        },
                        {
                          title: '性能7',
                          colspan: 1,
                          rowspan: 1,
                        },
                        {
                          title: '性能8',
                          colspan: 1,
                          rowspan: 1,
                        },
                      ],
                    ],
                }
              }
            }
          </code>
      </pre>

      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        addDialogShow: false,//添加弹框
        title: '',
        filterValue: '',
        defaultSelect: [],
        outsideList: [//列表数据
          {
            id: 10,
            parentId: 0,
            name: '电脑',
            price: '',
            factory: '',
            cateNo: '10',
          },
          {
            id: 1010,
            parentId: 10,
            name: '笔记本电脑',
            price: '',
            factory: '',
            cateNo: '1010',
          },
          {
            id: 101010,
            parentId: 1010,
            name: '华为',
            price: '5500$',
            factory: '华为科技',
            cateNo: '101010',
          },
          {
            id: 101011,
            parentId: 1010,
            name: '苹果',
            price: '8000$',
            factory: '苹果科技',
            cateNo: '101011',
          },
        ],
        hasErrorList: [//列表数据
          {
            id: 10,
            parentId: 0,
            name: '电脑',
            price: '',
            factory: '',
            cateNo: '10',
          },
          {
            id: 1010,
            parentId: 10,
            name: '笔记本电脑',
            price: '',
            factory: '',
            cateNo: '1010',
          },
          {
            id: 101010,
            parentId: 1010,
            name: '华为',
            price: '5500$',
            factory: '华为科技',
            cateNo: '101010',
            linetag: 'warning',
          },
          {
            id: 101011,
            parentId: 1010,
            name: '苹果',
            price: '8000$',
            factory: '苹果科技',
            cateNo: '101011',
          },
        ],
        normalizer: {
          parentId: 'treeParentId',
          id: 'treeId',
        },
        selfBuildList: [//列表数据
          {
            treeId: 10,
            treeParentId: 0,
            name: '电脑',
            price: '',
            factory: '',
            cateNo: '10',
          },
          {
            treeId: 1010,
            treeParentId: 10,
            name: '笔记本电脑',
            price: '',
            factory: '',
            cateNo: '1010',
          },
          {
            treeId: 101010,
            treeParentId: 1010,
            name: '华为',
            price: '5500$',
            factory: '华为科技',
            cateNo: '101010',
          },
          {
            treeId: 101011,
            treeParentId: 1010,
            name: '苹果',
            price: '8000$',
            factory: '苹果科技',
            cateNo: '101011',
          },
        ],
        fixedHeaderList: [//列表数据
          {
            id: 10,
            parentId: 0,
            name: '电脑',
            price: '',
            factory: '',
            cateNo: '10',
          },
          {
            id: 1010,
            parentId: 10,
            name: '笔记本电脑',
            price: '',
            factory: '',
            cateNo: '1010',
            disabled: true
          },
          {
            id: 101010,
            parentId: 1010,
            name: '华为',
            price: '5500$',
            factory: '华为科技',
            cateNo: '101010',
          },
          {
            id: 101011,
            parentId: 1010,
            name: '苹果',
            price: '8000$',
            factory: '苹果科技',
            cateNo: '101011',
          },
          {
            id: 101013,
            parentId: 1010,
            name: '惠普',
            price: '6000$',
            factory: '惠普科技',
            cateNo: '101013',
          },
          {
            id: 101014,
            parentId: 1010,
            name: '戴尔',
            price: '6000$',
            factory: '戴尔科技',
            cateNo: '101014',
          },
          {
            id: 101016,
            parentId: 1010,
            name: 'ThinkPad',
            price: '6000$',
            factory: '联想科技',
            cateNo: '101016',
          },
          {
            id: 101017,
            parentId: 1010,
            name: '外星人',
            price: '6000$',
            factory: '外星人科技',
            cateNo: '101017',
          },
          {
            id: 101018,
            parentId: 1010,
            name: '雷神',
            price: '6000$',
            factory: '雷神科技',
            cateNo: '101018',
          },
          {
            id: 1011,
            parentId: 10,
            name: '平板电脑',
            price: '',
            factory: '',
            cateNo: '1011',
          },
          {
            id: 101110,
            parentId: 1011,
            name: '苹果Air3',
            price: '2000$',
            factory: '苹果科技',
            cateNo: '101110',
          },
          {
            id: 101111,
            parentId: 1011,
            name: '小米4 Plus',
            price: '2000$',
            factory: '小米科技',
            cateNo: '101111',
          },
          {
            id: 101112,
            parentId: 1011,
            name: '华为M5',
            price: '2000$',
            factory: '华为科技',
            cateNo: '101112',
          },
        ],
        fixedColumnList: [
          {
            id: 10,
            parentId: 0,
            name: '电脑',
            price: '',
            factory: '',
            cateNo: '10',
            nature1: 'xxxxx',
            nature2: 'xxxxx',
            nature3: 'xxxxx',
            nature4: 'xxxxx',
            nature5: 'xxxxx',
            nature6: 'xxxxx',
            nature7: 'xxxxx',
            nature8: 'xxxxx',
          },
          {
            id: 1010,
            parentId: 10,
            name: '笔记本电脑',
            price: '',
            factory: '',
            cateNo: '1010',
            nature1: 'xxxxx',
            nature2: 'xxxxx',
            nature3: 'xxxxx',
            nature4: 'xxxxx',
            nature5: 'xxxxx',
            nature6: 'xxxxx',
            nature7: 'xxxxx',
            nature8: 'xxxxx',
          },
          {
            id: 101010,
            parentId: 1010,
            name: '华为',
            price: '5500$',
            factory: '华为科技',
            cateNo: '101010',
            nature1: 'xxxxx',
            nature2: 'xxxxx',
            nature3: 'xxxxx',
            nature4: 'xxxxx',
            nature5: 'xxxxx',
            nature6: 'xxxxx',
            nature7: 'xxxxx',
            nature8: 'xxxxx',
          },
          {
            id: 101011,
            parentId: 1010,
            name: '苹果',
            price: '8000$',
            factory: '苹果科技',
            cateNo: '101011',
            nature1: 'xxxxx',
            nature2: 'xxxxx',
            nature3: 'xxxxx',
            nature4: 'xxxxx',
            nature5: 'xxxxx',
            nature6: 'xxxxx',
            nature7: 'xxxxx',
            nature8: 'xxxxx',
          },
        ],
        SelfTheadConfig: [
          [
            {
              title: '电脑名称',
              colspan: 1,
              rowspan: 2,
              fixed: true,
              width: 350,
              fixedLeftWidth: 0,
              deepchoice: true
            },
            {
              title: '电脑品牌',
              colspan: 1,
              rowspan: 2,
              fixed: true,
              width: 200,
              fixedLeftWidth: 350
            },
            {
              title: '详情',
              colspan: 10,
              rowspan: 1,
            },
          ],
          [
            {
              title: '电脑价格',
              colspan: 1,
              rowspan: 1,
            },
            {
              title: '电脑厂家',
              colspan: 1,
              rowspan: 1,
            },
            {
              title: '性能1',
              colspan: 1,
              rowspan: 1,
            },
            {
              title: '性能2',
              colspan: 1,
              rowspan: 1,
            },
            {
              title: '性能3',
              colspan: 1,
              rowspan: 1,
            },
            {
              title: '性能4',
              colspan: 1,
              rowspan: 1,
            },
            {
              title: '性能5',
              colspan: 1,
              rowspan: 1,
            },
            {
              title: '性能6',
              colspan: 1,
              rowspan: 1,
            },
            {
              title: '性能7',
              colspan: 1,
              rowspan: 1,
            },
            {
              title: '性能8',
              colspan: 1,
              rowspan: 1,
            },
          ],
        ],
        currentUnit: null,//缓存点击选中的节点
        //弹框数据
        addmodel: {
          ComputerName: '',
          SerialNumber: '',
          Price: '',
          Factory: '',
        },
        //验证规则
        addrules: {
          ComputerName: [
            { required: true, message: '请输入电脑' },
          ],
          SerialNumber: [
            { required: true, message: '请输入电脑编号' },
          ],
          Price: [
            { required: true, message: '请输入电脑价格' },
          ],
          Factory: [
            { required: true, message: '请输入电脑厂家' },
          ],
        }
      }
    },
    methods: {
      //点击获取当前行
      getCurrent (row, eventType) {
        eventType === 'Single' ? console.log('你单击了') : console.log('你双击了')
        console.log(row)
        this.currentUnit = row
      },
      //添加子节点
      addCate () {
        if (this.currentUnit == null) {
          this.$SkyMessage('没有选中节点', 'error')
          return false
        }
        this.addDialogShow = true
        this.title = '添加'
      },
      //编辑当前节点
      editCate () {
        if (this.currentUnit == null) {
          this.$SkyMessage('没有选中节点', 'error')
          return false
        }
        this.addDialogShow = true
        this.title = '编辑'
        let { name, cateNo, price, factory } = this.currentUnit
        this.addmodel = {
          ComputerName: name,
          SerialNumber: cateNo,
          Price: price,
          Factory: factory,
        }

      },
      //删除当前节点
      delCate () {
        if (this.currentUnit == null) {
          this.$SkyMessage('没有选中节点', 'error')
          return false
        }
        this.$refs['sky-tree-table'].delete(this.currentUnit)
        this.currentUnit = null
      },
      //新增
      addSubmit (form) {
        // 表单全局校验
        this.$refs[form].validate(valid => {
          let option = {
            id: Math.floor(Math.random() * 5 + 1),
            parentId: this.currentUnit.id,
            name: this.addmodel.ComputerName,
            cateNo: this.addmodel.SerialNumber,
            price: this.addmodel.Price,
            factory: this.addmodel.Factory,
          }
          if (valid) {
            this.$SkyMessage('添加成功', 'success')
            this.$refs['sky-tree-table'].append(option)
            this.addDialogShow = false
          } else {
            this.$SkyMessage('校验失败', 'error')
          }
        })
      },
      //编辑
      editForm (form) {
        // 表单全局校验
        this.$refs[form].validate(valid => {
          if (valid) {
            this.$SkyMessage('编辑成功', 'success')

            this.currentUnit.name = this.addmodel.ComputerName
            this.currentUnit.cateNo = this.addmodel.SerialNumber
            this.currentUnit.price = this.addmodel.Price
            this.currentUnit.factory = this.addmodel.Factory

            this.addDialogShow = false
          } else {
            this.$SkyMessage('校验失败', 'error')
          }
        })
      },
      submitForm (form) {
        this.title == '添加' ? this.addSubmit(form) : this.editForm(form)
      },
      //获取所有数据
      saveAll () {

        console.log('获取所有数据', this.$refs['sky-tree-table'].getAllList())

        let differentiateTree = this.$options.filters[
          "differentiateTree"
        ];
        console.log('获取树结构数据', differentiateTree(this.$refs['sky-tree-table'].getAllList()))

      },
      //获取所有数据
      saveAllSelect () {

        console.log('获取所有数据', this.$refs['sky-tree-table'].getAllSelectList())

        let differentiateTree = this.$options.filters[
          "differentiateTree"
        ];
        console.log('获取树结构数据', differentiateTree(this.$refs['sky-tree-table'].getAllSelectList()))

      },
    },
    mounted () {
      setTimeout(() => {
        this.defaultSelect = [1010, 101010]
      }, 1000)
    }
  }
</script>

<style  lang="scss" scoped>
.verify.sky-tree-table {
  /deep/ table.table thead tr th:nth-child(1) {
    // background: red;
    position: relative;
  }
  /deep/ table.table thead tr th:nth-child(1)::after {
    position: absolute;
    right: 5px;
    top: -5px;
    content: "*";
    color: #f34427;
  }
}
</style>